<template>
  <div class="sort-table">
    <el-dropdown :hide-on-click="false">
      <el-button type="primary">
        <el-icon><setting /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
<!--          <el-dropdown-item v-for="item in tablePropsArr" :key="item.prop">-->
<!--            <el-icon><rank /></el-icon>{{item.label}}-->
<!--          </el-dropdown-item>-->
          <draggable
            :list="tablePropsArr1"
            item-key="prop"
            class="w-100"
            ghost-class="ghost"
            chosen-class="chosen"
            @start="state.dragging = true"
            @end="state.dragging = false"
            animation="300"
            @change="changeValue"
          >
            <template #item="{ element }">
              <div>
                <el-dropdown-item>
                  <el-checkbox v-model="element.isHidden" size="small" @change="changeValue">
                    <template #default>
                      <el-icon><rank /></el-icon>{{element.label}}
                    </template>
                  </el-checkbox>
                </el-dropdown-item>
              </div>
            </template>
          </draggable>

        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
  import draggable from 'vuedraggable'
  import {defineProps} from 'vue'
  const props = defineProps({
    tablePropsArr:[]
  })
  const emit = defineEmits(['throwTableProps'])
  const tablePropsArr1 = ref(props.tablePropsArr)

  const state = reactive({
    enabled: true,
    dragging: false,
  });

  function changeValue(){
    emit('throwTableProps',tablePropsArr1.value)
  }
</script>

<style scoped lang="less">
 .sort-table{
   margin: 15px 0;
 }

 .ghost {
   opacity: 0.5;
   border: 1px solid #18a058;
 }
 .chosen {
   border: 1px solid #18a058;
 }
 .item {
   width: 100%;
   &:hover {
     background-color: #f0f0f0;
   }
 }
 .not-draggable {
   cursor: no-drop;
 }
</style>